# 3.37 Smart Control Panel

## 3.37.1 Overview

Combined web buttons and wireless control, this control panel in this project is able to control modules and read module values as well. 

## 3.37.3 Test Code

You can manually build blocks, or directly open the code file we provide: `3-37-intelligent console.ubp`. If you have any questions about how to open code files or upload code, please back to `1.9 Upload Code`.

**Build code blocks:**

1. In ![](./media/control.png), drag ![](./media/t1.png) to the script area.
2. Drag ![t195](./media/t195.png) and set the WIFI name to “LiuTest” and password to “88888888”.
3. Drag ![t196](./media/t196.png) and set the Web name to “CodingBox.local”.
4. Add ![t170](./media/t197.png) to refresh the data of each sensor on the Web page.
5. Add ![t198](./media/t198.png) and set the title to “Coding Box Web Panel”.
6. Use ![t199](./media/t199.png) to display temperature value on the Web page. Modify the blank behind the “with selector” into “cbox_temperature”.
7. Similarly, add humidity, photoresistor, PIR motion and RFID value in sequence.
8. Use ![t206](./media/t206.png) to add a component that controls the display color of WS2812, and modify the blank behind “with selector” to `cbox_setAllNeoPixels`.
9. Use ![t204](./media/t204.png) to add a slider that controls the servo. Remain the name as default and set the range to 0-180, and modify the blank behind “with selector” to `cbox_setServo`.
10. Use ![t207](./media/t207.png) to add a button that controls the fan on. Set name as “Fan ON”, and modify the blank behind “with selector” to `cbox_setFan`. Click ![t219](./media/t219.png) to add a “params” blank, and put ![t217](./media/t217.png) in it and set to “100”.
11. Use ![t207](./media/t207.png) to add a button that controls the fan off. Set name as “Fan OFF”, and modify the blank behind “with selector” to `cbox_stopFan`.
12. Use ![t226](./media/t226.png) , a loop block, to replace code block that repeatedly executes, such as LED control.
13. Put a ![t217](./media/t217.png) into the blank of ![t226](./media/t226.png) and click ![t219](./media/t219.png) to add “red”, “yellow” and “green”.

![t227](./media/t227.png)

14. Put ![t208](./media/t208.png) in ![t227](./media/t227.png). Use ![t228](./media/t228.png) to bind the “i” value to “LED”, which is the name of button. And modify the blank behind “with selector” to `cbox_setLED`. Click ![t219](./media/t219.png) to add a “params” blank, and put ![t217](./media/t217.png) in it and set to variable “i”.

![t229](./media/t229.png)

15. Similarly, we set the buttons for OLED display icons. They are “happy”, “heart” and “sad” respectively, of which variable “i” is also available. 

    In ![LEDDisplay](./media/LEDDisplay.png), find ![t126](./media/t126.png) and “copy callable name”, and paste to the blank behind the “with selector”: `led_displayImage`. Click ![t219](./media/t219.png) to add a “params” blank, put ![t217](./media/t217.png) in it, and click ![t219](./media/t219.png) of it twice so we get 3 blanks of list. Input variable “i” in the first one and “1” in the remaining two(The starting position of the icon display).

![t230](./media/t230.png)

**Complete code:**

![t231](./media/t231.png)

## 3.37.3 Test Result

Connect the coding box to the MicroBlocks via USB or Bluetooth. Click ![t59](./media/t59.png) to upload code. After connecting to wifi, you can see an IP address: ![t212](./media/t212.png). Now connect your control device (mobile phone, tablet, computer) to the same wifi and search `codingbox.local` on the browser to enter the Web page. 

![image-20250714161427169](./media/image-20250714161427169.png)